<template>
  <ul class="nav" style="margin: 0;">
    <li>
      <a href="javascript:void(0)" @click="navTo('/dashboardAuth/viewpoint')" class="ftz16" :class="{'on': /dashboardAuth\/viewpoint/.test($route.path)}">
        <img src="../../assets/res/img/icon_text.png" class="icon">
        <span>我的观点</span>
      </a>
    </li>
    <template v-if="user.authType !== '3'">
      <li>
        <a href="javascript:void(0)" @click="navTo()" class="ftz16">
          <img src="../../assets/res/img/icon_plan.png" class="icon">
          <span>我的计划</span>
        </a>
        <ul class="sub-menu-box" :class="{show: showSubMenusFlag}">
          <li>
            <a href="javascript:void(0)" @click="$router.push('/dashboardAuth/plan')" class="ftz16" :class="{'selected': /dashboardAuth\/plan$/.test($route.path)}">
              <img src="../../assets/res/img/icon_plan_jt.png" class="icon">
              <span>计划管理</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)" @click="$router.push('/dashboardAuth/planarticle')" class="ftz16" :class="{'selected': /dashboardAuth\/planarticle/.test($route.path)}">
              <img src="../../assets/res/img/icon_plan_jt.png" class="icon">
              <span>文章管理</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="javascript:void(0)" class="ftz16"><img src="../../assets/res/img/icon_live.png" class="icon">
          <span>我的直播</span>
        </a>
      </li>
    </template>
    <li>
      <a href="javascript:void(0)" class="ftz16" @click="navTo('/dashboardAuth/answer')" :class="{'on': /dashboardAuth\/answer/.test($route.path)}">
        <img src="../../assets/res/img/icon_Q&A.png" class="icon">
        <span>我的问答</span>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)" @click="navTo('/wallet')" class="ftz16" :class="{'on': /wallet/.test($route.path)}"><img src="../../assets/res/img/icon_wallet.png" class="icon">
        <span>我的钱包</span>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)" class="ftz16"><img src="../../assets/res/img/icon_data.png" class="icon">
        <span>资料设置</span>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)" class="ftz16"><img src="../../assets/res/img/icon_feed.png" class="icon">
        <span>意见反馈</span>
      </a>
    </li>
  </ul>
</template>

<script>
// import { router } from '@/router'
// let dashBoardAuthRouter = router.filter((item) => item.path === '/dashboardAuth')[0]
export default {
  data () {
    return {
      // dashBoardAuthRouter: dashBoardAuthRouter,
      showSubMenusFlag: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.showSubMenusFlag = this.$route.path.indexOf('/dashboardAuth/plan') === 0
    })
  },
  computed: {
    user () {
      return this.$store.state.me
    }
  },
  methods: {
    navTo (path) {
      if (path) {
        this.$router.push(path)
        this.showSubMenusFlag = false
      } else {
        this.showSubMenusFlag = !this.showSubMenusFlag
      }
    }
  }
}
</script>

<style scoped lang="scss">
.nav {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  > li {
    display: block;
    min-height: 56px;
    > a {
      display: block;
      height: 56px;
      line-height: 56px;
      border-left: 4px solid #fff;
      &:hover {
        border-left: 4px solid #ec4a36;
        background: #fafafa;
        color: #ec4a36;
        .icon {
          -webkit-filter: grayscale(0);
          filter: grayscale(0);
        }
      }
      .icon {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        margin-right: 8px;
        margin-top: -4px;
      }
      &.on {
        border-left: 4px solid #ec4a36;
        background: #fafafa;
        color: #ec4a36;
        .icon {
          -webkit-filter: grayscale(0);
          filter: grayscale(0);
        }
      }
    }
  }
}

.sub-menu-box {
  transition: height 0.1s linear;
  height: 0;
  overflow: hidden;
  &.show {
    height: 112px;
  }
  li {
    margin-left: 15px;
    height: 56px;
    line-height: 56px;
    .icon {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      margin-right: 8px;
      margin-top: -4px;
    }
    .selected {
      color: #ec4a36;
      .icon {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
      }
    }
  }
}
</style>
